<template>
  <div class="earlyWarningWrap classMain">
    <!-- <img class="topBgPic" src="../assets/topBg.png" alt=""> -->
    <NavBar
      :title="'预报数据'"
      :cityName="cityName"
      :areaName="areaName"
      :SeveralMenus="'1'"
      :text="'返回'"
      @clicksPopul="clicksPopul"
    ></NavBar>
    <div class="yubao">
      <!--地图-->

      <div style="width: 100%; height: 100%" id="map"></div>
      <div class="mapCenterTit">
        <span>{{ title }}预报（单位：{{ danwei }}）</span>
      </div>

      <div class="tuceng" @click="tucengclick">
        <img
          style="width: 25px; height: 25px"
          src="../assets/liveData/tuceng.png"
          alt=""
        />
        图层
      </div>
      <Sidebar :arr="arr" @changeFactor="changeFactor"></Sidebar>
      <!--颜色区域-->
      <!-- 温度 -->
      <TemperatureControl :factorIndex="factorIndex" ></TemperatureControl>
      <!--时间区间-->
      <!-- <div class="timeArea" v-if="showld">
        <div class="timeAreaName"><span>时间区间</span></div>

        <vue-slider
          v-model="value"
          :tooltip="'always'"
          :data="data"
          :dotStyle="{ border: '1px solid #0054EB' }"
          @change="sliderChangeFN"
          :enable-cross="false"
        >
        </vue-slider>
      </div> -->
      <positioning
        @bindEvent="bindEvent"
        style="bottom: 155px"
        :possinon="possinon"
      ></positioning>
      <div class="timeArea">
        <vue-slider
          v-model="value"
          :format-tooltip="formatTooltip"
          :tooltip="'always'"
          :data="data"
          :dotStyle="{ border: '1px solid #0054EB' }"
          @change="sliderChangeFN"
          :enable-cross="false"
          :marks="true"
          :hide-label="true"
        >
        </vue-slider>
      </div>

      <!--地图上的名字-->
    </div>
    <popup
      v-if="showpopul == true"
      @close="showpopul = false"
      @huanhu="huanhu"
    ></popup>
    <comArea
      v-if="showArea"
      @closeEmit="showArea = false"
      :arr="arr1"
      @confirmEmit="confirmEmitMet"
    >
    </comArea>
    <canvas id="canvasMap" style="display: none"></canvas>
  </div>
</template>
<script type="text/javascript">
import meteoroEarlyWarningApi from "@/service/earlyWarning.js";

import earlyWarning from "@/components/mixins/earlyWarning.js";
import area from "@/components/mixins/area.js";
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";

import forecastimg from "../assets/icon/leidianicon.png";

import popup from "../components/popup/index.vue";
import map from "@/util/map.js";
import { getItem } from "../util/storage.js";
export default {
  mixins: [earlyWarning, area],
  data() {
    return {
      colornum: "",
      title: "温度",
      danwei: "°C",
      active: 0,
      lockDate: [], // 锁定的日期（滑动结束时自动跳到指定的日期）
      markDate: [], // 做标记的日期
      showld: true,
      arr1: [],
      longAndLati: {
        lapsXcoordinate: "",
        lapsYcoordinate: "",
      },
      mask: true,
      possinon: true,
      forecastimg: forecastimg,

      arr: [
        {
          text: "温度",
          unactive: "wendu.png",
          active: "wenduActive.png",
        },
        {
          text: "湿度",
          unactive: "shi.png",
          active: "shiActive.png",
        },
        {
          text: "风",
          unactive: "feng.png",
          active: "fengActive.png",
        },
        {
          text: "降雨",
          unactive: "rain.png",
          active: "rainActive.png",
        },
      ],
      date: "",
      popuplist: [],
      titleCon: "太原市",
      features: [],
      value1: "",
      ruleType: [],
      timeParams: {},
      params: {},
      activeRule: 0,
      data: [],
      data1: ["07月31日19:00"],
      value: "",
      type: "气温",
      Time: [],
      map: null,
      factorIndex: 0,
      showArea: false,
      showpopul: false,
      location: "",
      gdfsTime: [],
      popupDOM: null,
      silderId: "",
      areaName:''
      
    };
  },
  created() {
    this.areaName = this.$store.getters.location[2].name;
    map.init().then((res) => {
      var location = getItem("location");
      if (location.length > 0) {
        this.cityName = location[1].name;
       
      }
      this.longAndLati.lapsXcoordinate = this.$store.getters.cityLongAndLati[0];
      this.longAndLati.lapsYcoordinate = this.$store.getters.cityLongAndLati[1];
      this.ruleType = this.mixin_ruleTypeObj;
      this.timeParams = this.ruleType[0].timeParams;
      this.params = this.ruleType[0].params;

      //初始化经纬度
      this.longAndLati.lapsXcoordinate = Number(
        this.$store.getters.cityLongAndLati[0]
      );

      this.longAndLati.lapsYcoordinate = Number(
        this.$store.getters.cityLongAndLati[1]
      );
      this.$util.bianKong();
      this.getTime("first");
    });
  },
  destroyed: function () {
    this.map.remove();
    // 离开页面生命周期函数
    // this.websocketclose()
  },

  components: {
    VueSlider,
    popup,
  },
  methods: {
    initMap(location, style) {
      var _this = this;
      _this.location = location;
      _this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      _this.map = new SGMap.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets-v2",
        // 默认缩放层级
        zoom: 5.4,
        // 地图中心点
        center: [112.56594000000001, 37.87068],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei",
      });

      // 监听地图加载完成事件
      // 地图事件请参考文档 https://map.sgcc.com.cn/products/js-sdk/v3/doc.html#Events
      _this.map.on("load", function (e) {
        _this.$util.initLayer("山西省", _this.map);
        _this.$util.search("山西省", _this.map);
        _this.$toast.clear();
        _this.$util.canvans(
          _this.features,
          _this.factorIndex,
          _this.map,
          _this.silderId
        );

        _this.upndate();
        _this.getShi();
        _this.map.on("click", function (e) {
          _this.longAndLati.lapsXcoordinate = e.lngLat.lng;
          _this.longAndLati.lapsYcoordinate = e.lngLat.lat;
          _this.getShi();
          _this.possinon = true;
        });
      });
    },

    huanhu(style) {
      this.map.setBaseStyle(style);
    },
    upndate() {
      var _this = this;
      var index = _this.factorIndex;
      var type = "";
      if (index == 0) {
        type = _this.wenDu;
      } else if (index == 1) {
        type = _this.shiDu;
      } else if (index == 2) {
        type = _this.fengLi;
      } else if (index == 4) {
        type = _this.jiangShui;
      }

      _this.popupDOM = new SGMap.Popup({
        // info_geo
        closeButton: true,
        closeOnClick: false,
        offset: {
          bottom: [0, 0],
        },
      });

      //   this.data1 = []
      //   _this.initLiveDataApi(_this.map)
    },
    tucengclick() {
      this.showpopul = true;
    },
    formatTooltip(val) {
      return (this.value1 = "07月31日19:00");
    },

    bindEvent() {
      var _that = this;
      SGMap.plugin("SGMap.GeolocationTask").then(function (res) {
        var geo = new SGMap.GeolocationTask();
        geo
          .getLocation()
          .then(function (data) {
            var arr1 = data[0].map(Number);

            _that.map.setCenter(arr1);
            _that.longAndLati.lapsXcoordinate = arr1[0];
            _that.longAndLati.lapsYcoordinate = arr1[1];
            _that.getShi();
            //设置缩放
            _that.$toast("定位成功");
            _that.possinon = false;
          })
          .catch(function (e) {
            _that.$toast("定位失败");
            _that.possinon = true;
          });
      });

      // 手动定位
    },
    confirmEmitMet(value) {
      var _this = this;
      _this.showArea = false;
      _this.$util.Convertlatitude(value).then((result) => {
        _this.longAndLati.lapsXcoordinate = result[0];
        _this.longAndLati.lapsYcoordinate = result[1];
        var location = [result[0], result[1]];
       
        _this.cityName = value[1].name;
        _this.areaName = value[2].name;
        _this.arr1 = [value[1].name, value[2].name];

        
        _this.getShi();
      });
    },
 
    clicksPopul() {
      this.showArea = true;
   
      this.arr1 = [this.cityName, this.areaName];
    },
    // 调节slider的起始终止值

    // slider 改变值
    sliderChangeFN(value) {
      this.value = value;
      //   this.slideId = value.id

      var list = this.data1.filter((it) => {
        return it.gdfsTime == value;
      });
      this.getTime("");
      this.getShi();
    },

    onClickLeft() {
      this.$router.go(-1);
    },

    changeTab(index) {
      if (index == 0) {
        this.titleCon = "24小时降水预报";
      } else if (index == 1) {
        this.titleCon = "温度预报";
      }
    },
    changeFactor(item, index) {
      this.factorIndex = index;

      var factorInfo = {
        0: {
          showld: true,
          type: "气温",
          title: "温度",
          danwei: "°C",
        },
        1: {
          showld: true,
          type: "相对湿度",
          title: "湿度",
          danwei: "%RH",
        },
        2: {
          showld: true,
          type: "10m风速",
          title: "风力",
          danwei: "m/s",
        },
        3: {
          showld: true,
          type: "10天地面总降水24小时累积量（3小时间隔)",
          title: "12小时降水",
          danwei: "mm",
        },
      };

      if (factorInfo.hasOwnProperty(index)) {
        var info = factorInfo[index];
        this.showld = info.showld;
        this.type = info.type;
        // if (this.type == '10m风速') {
        //   return this.$router.push('/Windparticles')
        // }
        this.title = info.title;
        this.danwei = info.danwei;
      }
      this.getTime();
    },
    //获取各个点的值
    getTime(current) {
      var params = {
        type: this.type,
      };

      meteoroEarlyWarningApi
        .info_getTime(params)
        .then((res) => {
          this.gdfsTime = [];
          this.Time = [];
          this.data = [];
          this.data1 = [];

          for (var i = 0; i < res.length; i++) {
            let newStr = res[i].gdfsTime.replace(/T/g, " ");
            this.Time.push(newStr);

            res[i].gdfsTime = `${res[i].gdfsTime.slice(5, 10)}-${res[
              i
            ].gdfsTime.slice(11, 16)}`;
            this.data.push(res[i].gdfsTime);

            this.data1.push(res[i]);
            this.gdfsTime[i] = res[i].gdfsTime.slice(11, 13);
          }

          if (current == "first") {
            this.value = this.data[0];
            this.silderId = res[0].id;
            this.getPoni(res[0].id, current);
          } else {
            var list = this.data1.filter((it, index) => {
              return this.value == it.gdfsTime;
            });
            if (list.length == 0) {
              this.value = this.data[0];
              this.getPoni(res[0].id, current);
            } else {
              this.getPoni(list[0].id, current);
            }
          }
        })
        .catch((error) => {
          //this.$toast.clear();
          this.toastNoData("暂无数据");
        });
    },
    getPoni(id, current) {
      var params = {
        id: id,
      };

      meteoroEarlyWarningApi.getTu(params).then((res) => {
        this.features = res.features;

  

        if (current == "first") {
          this.initMap([112.56594000000001, 37.87068]);
          this.value = this.data[0];
          this.getShi();
        } else {
          this.popupDOM.remove();
          this.upndate();
          //   this.value = this.data[0]
          this.getShi();
          if (current == undefined) {
            this.$util.allclearcanvans(this.map);
            this.$util.canvans(this.features, this.factorIndex, this.map, id);
          } else {
            this.$util.canvans(this.features, this.factorIndex, this.map, id);
            this.$util.clearcanvans(this.map);
          }
        }

   
      });
    },
    //获取详情
    getEdit(params) {
      meteoroEarlyWarningApi
        .Returnsinformation(params)
        .then((res) => {
          this.popupItem = res[0];
          this.popUpHtml();

          this.showPopupDOM(this.map, params.lon, params.lat);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getShi() {
      var time = this.value.slice(0, 5);
      var hs = this.value.slice(6, 11);
      var a = time + " " + hs;

      var times = {};
      var arr = [];
      this.Time.filter((it) => {
        // this.marks.push()
        arr.push(it.slice(0, 10));
        if (it.includes(a)) {
          return (times = it);
        }
      });
      //   this.marks = Array.from(new Set(arr))
      var params = {
        time: times,
        lon: this.longAndLati.lapsXcoordinate,
        lat: this.longAndLati.lapsYcoordinate,
      };

      this.getEdit(params);
    },
    showPopupDOM(map, lng, lat) {
      this.popupDOM.setLngLat([lng, lat]).setHTML(this.popUpHtml()).addTo(map);
    },
    popUpHtml() {
      let type = this.type;

      var dongtiatype = "";
      if (type == "气温") {
        type = "温度";
        dongtiatype = this.popupItem.tmp + "℃";
      } else if (type == "相对湿度") {
        type = "相对湿度";
        dongtiatype = this.popupItem.rrh + "%rh";
      } else if (type == "10m风速") {
        type = "风速/风向";
        dongtiatype = `${this.popupItem.wind}m/s`;
      } else {
        type = "雨量";
        dongtiatype = this.popupItem.qpf + "mm";
      }

      let htmlStr = `
            <div style="padding:6px;">

                <div class='popHtmlLi'    style="text-align: left;" ><span>${type}:${dongtiatype}</div>



                </div>
           `;
      return htmlStr;

      //     //温度,雨量,风速/风向,popUpHtml湿度
    },
    info_getTime(id) {
      var params = {
        id: id,
      };
      meteoroEarlyWarningApi.info_geo(params).then((res) => {
 

        this.features = res;
        if (this.features.length == 0) {
          this.toastNoData("暂无数据");
          return;
        }
     

        this.initMap([112.56594000000001, 37.87068], undefined);
      });
    },

    toastNoData(message) {
      var _this = this;
      setTimeout(() => {
        // _this.initMap(this.$store.getters.cityLongAndLati);
      }, 2000);
    },
    topTabbarMet(index) {
      this.activeRule = 0;
      this.active = index;
      if (index == 0) {
        this.ruleType = this.mixin_ruleTypeObj;
      } else {
        this.ruleType = this.mixin_diagnose;
      }
      this.timeParams = this.ruleType[0].timeParams;
      this.params = this.ruleType[0].params;
    },
    ruleTypeMet(index) {
      this.activeRule = index;
      this.timeParams = this.ruleType[index].timeParams;
      this.params = this.ruleType[index].params;
    },
  },
};
</script>
<style type="text/css" lang="less" scoped>
.earlyWarningWrap {
  width: 100%;

  height: 100%;
  position: relative;

  .btttn {
    position: absolute;
    top: 100px;
    right: 0;
    text-align: right;
    font-size: 17px;
    z-index: 99999999;
    width: 100%;
  }
  /deep/ .van-button--normal {
    padding: 0 10px;
    font-size: 14px;
    height: 25px;
    margin-left: 3px;
  }
  .topBgPic {
    width: 100%;
    height: 100%;
  }

  .yubao {
    position: absolute;
    width: 100%;
    height: 100%;

    .titleArea {
      position: relative;
      left: 0;
      top: 0;

      img {
        width: 100%;
      }

      .titleCon {
        position: absolute;
        top: 6px;
        .px2rem(left, 25px);
        color: white;
        font-size: 16px;
        font-weight: bold;
      }
    }

    .mapClass {
      background-color: white;
      position: absolute;
      left: 0;
      height: 100%;

      right: 0;
      top: 0;
      bottom: 0;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    .mapCenterTit {
      width: 345px;
      height: 40px;
      background: #ffffff;
      box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.5);
      border-radius: 10px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 25px;

      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
      right: 10px;

      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #101010;
      text-align: center;
    }

    .topTabbarNew {
      position: absolute;
      left: 10px;
      top: 100px;
      width: 20px;
      height: 90px;
      z-index: 1;

      img {
        width: 100%;
      }
    }

    .linearLine {
      position: absolute;

      left: 10px;
      bottom: 80px;
      width: 20px;
      border-radius: 30px;
      overflow: hidden;

      img {
        width: 100%;
      }
      .wendu {
        display: flex;
        width: 100%;
        height: 15px;

        background-color: #034da1;
      }

      .linearLineBlock {
        width: 100%;
        height: 12px;
        border-bottom: 1px solid white;
      }

      .linearLineOne {
        border-top-right-radius: 40px;
        border-top-left-radius: 40px;
        background-color: #5e0c4b;
      }

      .linearLineTwo {
        background-color: #841679;
      }

      .linearLineThree {
        background-color: #2f065b;
      }

      .linearLineFour {
        background-color: #002176;
      }

      .linearLineFive {
        background-color: #034da1;
      }

      .linearLineSix {
        background-color: #436cd5;
      }

      .linearLineSeven {
        background-color: #22a6e8;
      }

      .linearLineEight {
        background-color: #78ddfb;
      }

      .linearLineNine {
        background-color: #abe7f1;
      }

      .linearLineTen {
        background-color: #fefeca;
      }

      .linearLineEle {
        background-color: #d3fdaf;
      }

      .linearLineThr {
        background-color: #b0fc60;
      }

      .linearLineTFour {
        background-color: #fdfd1b;
      }

      .linearLineTFive {
        background-color: #f5c951;
      }

      .linearLineTSix {
        background-color: #fd854e;
      }

      .linearLineTSeven {
        background-color: #fe8254;
      }

      .linearLineTEight {
        background-color: #f92d06;
      }

      .linearLineTNine {
        background-color: #ad1c00;
        border-bottom: none;
        border-bottom-right-radius: 40px;
        border-bottom-left-radius: 40px;
      }

      // background: -webkit-linear-gradient(to top, #ff0000, #001eff,#07D0FF,#2cc946,#d5fb0c,#e04e4e,#f33900);
      // background: linear-gradient(to bottom, #ff0000, #001eff,#07D0FF,#2cc946,#d5fb0c,#e04e4e,#f33900);
    }

    .timeArea {
      position: absolute;
      left: 50%;

      width: 320px;
      bottom: 35px;
      z-index: 9;
      transform: translate(-50%, -50%);
      height: 40px;
      background: #ffffff;
      box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.5);
      border-radius: 10px;
      padding: 8px 15px;

      .timeAreaName {
        font-size: 12px;
        color: #999;
      }
    }
  }
  //   /deep/ .vue-slider-dot-tooltip-inner {
  //     margin-left: 38px !important;
  //   }
  //   /deep/ .vue-slider-dot-tooltip-inner-top::after {
  //     left: 65%;
  //   }
  .LiveDatabottomTabbar {
    position: absolute;
    .px2rem(left, 20px);
    .px2rem(right, 20px);
    top: 730px;
    height: 0px;
    overflow: hidden;
    font-size: 18px;
    .leftMyButton {
      float: left;
    }

    .RightMyButton {
      float: right;
    }
  }

  .topTabbar {
    position: absolute;
    left: 0;
    top: 46px;
    padding: 5px;
    background: white;
    background: rgba(255, 255, 255, 0.7);

    .routine {
      display: block;
      font-size: 14px;
      color: #666;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #cecece;
    }

    .routine:last-child {
      border-bottom: none;
    }
  }

  .typeLine {
    position: absolute;
    right: 5px;
    top: 50px;
    height: 250px;
    padding: 5px;
    background: white;
    background: rgba(255, 255, 255, 0.7);
    overflow: scroll;
  }

  .typeLineLi {
    display: block;
    font-size: 14px;
    color: #666;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #cecece;
  }

  .typeLineLiActive {
    background: #1a88f9;
    color: white;
  }

  .typeLineLi:last-child {
    border-bottom: none;
  }
  /deep/ .van-nav-bar__content {
    background: #357cff;
  }
  /deep/ .vue-slider {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    margin-top: 3px !important;
  }
  /deep/ .vue-slider-dot-tooltip-top {
    top: 220%;
    z-index: 99999;
  }

  /deep/ .custom-tooltip {
    width: 65px;
    font-size: 12px;
  }
  /deep/ .month-value {
    font-size: 12px;
  }
  /deep/ .timeline-container {
    padding: 0;
  }
  /deep/ .timeline-slider {
    padding: 0;
  }
  /deep/ .sgmap-popup-close-button {
    top: 0 !important;
    width: 15px !important;
    height: 15px !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    z-index: 99999 !important;
    color: transparent !important;
    font-size: 16px !important;
  }
  /deep/ .vue-slider-dot-tooltip-top {
    top: -5px;
    z-index: 999999;
  }
}
.tuceng {
  position: absolute;
  width: 40px;
  display: flex;
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  padding: 4px;
  height: 40px;
  right: 10px;
  top: 23%;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
  border-radius: 5px;
}

/deep/ .sgmap-canvas {
  width: 100%;
  height: 100%;
}
</style>
